<template>
    <div class="result-list">
      <div class="title">{{title}}</div>
      <ul>
        <li class="result-item" v-for="item in 3">
          <router-link to="" class="result-item-a">
            <span class="image"><slot name="img"><img src="../../../static/img/mypic.jpg"></slot></span>
            <div class="content">
              <p class="name"><slot name="name">王廉一 北京华信医院 心脏内科</slot></p>
              <p class="location"><slot name="location">广东广州</slot></p>
              <p class="detail"><slot name="detail">一直从事...</slot></p>
            </div>
          </router-link>
        </li>
        <div class="load-more">查看全部</div>
      </ul>
    </div>
</template>

<script>
    import {getDoctor} from "../../api/search";

    export default {
      name: "result-list",
      props: {
        dataList: {
          type: Array,
          default: null
        },
        title: {
          type: String,
          default: "为您查询到的结果为"
        }
      },
      mounted () {
        this._getDoctor()
      },
      methods: {
        _getDoctor () {

        }
      }
    }
</script>

<style scoped>
  .result-list{
    margin-top: 20px;/*rem*/
    background-color: #ffffff;
  }
  .result-list .title{
    height: 60px;/*rem*/
    line-height: 60px;/*rem*/
    padding: 0 28px;/*rem*/
    font-size: 26px;/*px*/
    color: #3d3d3d;
    border-bottom: 1px solid #ededed;
  }
  .result-item{
    /*padding: 26px 0 26px 26px;!*rem*!*/
  }
  .result-item-a{
    display: flex;
    align-items: center;
  }
  .result-item .image{
    margin: 0 26px;/*rem*/
    width: 74px;/*rem*/
    height: 74px;/*rem*/
    border-radius: 50%;
  }
  .result-item .image img{
    width: 100%;
    height: 100%;
  }
  .result-item .content{
    display: flex;
    flex: 1;
    flex-direction: column;
    border-bottom: 1px solid #f2f2f2;
    padding: 26px 26px 26px 0;/*rem*/
  }
  .result-item .content .name{
    font-size: 26px;/*px*/
    color: #5b5b5b;
  }
  .result-item .content .location,.result-item .content .detail{
    font-size: 24px;/*rem*/
    color: #999999;
  }
  .load-more{
    font-size: 28px;/*px*/
    color: #58b2e7;
    text-align: center;
    height: 80px;/*rem*/
    line-height: 80px;/*rem*/
    border-top: 1px solid #f2f2f2;
  }
</style>
